<template>
  <div class="addStatute">
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      法规修改
    </h1>
    <div class="form">
      <el-form
        :inline="true"
        :model="AddData"
        class="demo-form-inline el_form"
        :rules="rules"
      >
        <el-form-item label="法规编号">
          <el-input
            v-model="AddData.statuteId"
            style="width: 400px"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="法规名称" prop="statuteName">
          <el-input
            v-model="AddData.statuteName"
            placeholder="法规名称"
            style="width: 400px"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form
        :inline="true"
        :model="AddData"
        class="demo-form-inline el_form"
        :rules="rules"
      >
        <el-form-item label="法规类型" prop="statuteTypeId">
          <el-select
            v-model="AddData.statuteTypeId"
            placeholder="法规类型"
            clearable
          >
            <el-option
              :key="v.statuteTypeId"
              v-for="v in statuteType"
              :label="v.statuteTypeName"
              :value="v.statuteTypeId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="法规文件">
          <el-upload
            class="upload-demo"
            name="multipartFile"
            action="http://118.31.58.45:8080/maintenance/upload"
            multiple
            :limit="3"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            :on-success="success"
            :file-list="fileList"
            style="float: left"
          >
            <el-button size="mediu" type="primary">修改上传</el-button>
          </el-upload>
          <!-- <span style="margin:0 30px">文件名：{{AddData.fileAddress}}</span> -->
        </el-form-item>
      </el-form>
      <el-form
        :rules="rules"
        ref="form"
        :model="AddData"
        label-width="80px"
        size="medium "
        style="margin-top: 50px"
      >
        <el-form-item label="资料说明" prop="details">
          <el-input
            type="textarea"
            v-model="AddData.details"
            style="width: 1100px; height: 300px"
            placeholder=" 1.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明。

2.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明

3.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明

4.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明"
          ></el-input>
        </el-form-item>
        <div style="text-align: center">
          <el-button style="margin-right: 20px; width: 100px" @click="cancel"
            >取消</el-button
          >
          <el-button
            type="danger"
            style="
              margin-right: 20px;
              background: #6554c0;
              border: none;
              width: 100px;
            "
            @click="editDesc"
            >保存</el-button
          >
          <el-button size="mediu" type="success" @click="downloadInfo"
            >下载资料</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      AddData: {
        statuteId: "",
        statuteName: "",
        statuteTypeId: "",
        details: "",
        fileAddress: "",
      },
      rules: {
        statuteName: [
          { required: true, message: "请输入法规名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        statuteTypeId: [
          { required: true, message: "请选择法规类型", trigger: "blur" },
        ],
        details: [
          { required: true, message: "请输入法规详情", trigger: "blur" },
        ],
      },
      statuteType: [],
      fileList: [],
      formData: [],
    };
  },
  methods: {
    success: function ({ data }) {
      this.AddData.fileAddress = data[0];
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //取消
    cancel: function () {
      this.$router.push("/home/Fggl");
    },
    //保存添加
    editDesc: function () {
      this.$axios({
        url: "/statute/update",
        method: "put",
        data: {
          details: this.AddData.details,
          fileAddress: this.AddData.fileAddress,
          statuteId: this.AddData.statuteId,
          statuteName: this.AddData.statuteName,
          statuteTypeId: this.AddData.statuteTypeId,
        },
      }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
          this.$message.success("修改成功！");
          setTimeout(() => {
            this.$router.push("/home/Fggl");
          }, 1000);
        } else {
          this.$message.error("修改失败！请重新修改！");
        }
      });
    },
    //下拉框渲染
    getData: function () {
      this.$axios({
        url: "/statuteType/list",
        method: "post",
        data: {
          limit: 20,
          page: 1,
        },
      }).then(({ data }) => {
        this.statuteType = data.data;
      });
    },
    //上传文件
    update(e) {
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append("multipartFile", file); //通过append向form对象添加数据
      //console.log(param.get("file")); //FormData私有类对象，访问不到，通过get判断值是否传进去
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.$axios.post("/upload", param, config).then((res) => {
        // this.AddData.fileAddress=data.data[0]
        // console.log(res.data);
      });
    },
    //渲染页面函数
    getEdit1: function (v) {
      this.AddData.statuteId = v.statuteId;
      this.AddData.statuteName = v.statuteName;
      this.AddData.statuteTypeId = v.statuteType.statuteTypeId;
      this.AddData.details = v.details;
      this.AddData.fileAddress = v.fileAddress;
    },
    //渲染页面数据
    getEdit: function () {
      let Data = this.$store.state.xjqVuex.statute;
      console.log(Data);
      if (Data == "") {
        this.getEdit1(this.formData);
      } else {
        this.getEdit1(Data);
      }
    }, // 下载
    downloadInfo: function () {
      this.$axios({
        url: "/download",
        responseType: "blob", //设置返回类型
        params: {
          fileName: this.formData.fileAddress,
        },
      }).then((res) => {
        console.log(res);
        const link = document.createElement("a");
        try {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          let _fileName = res.headers["content-disposition"]
            .split(";")[1]
            .split("=")[1]; //文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到
          link.style.display = "none"; // 兼容不同浏览器的URL对象
          const url = window.URL || window.webkitURL || window.moxURL;

          link.href = url.createObjectURL(blob);

          link.setAttribute(
            "download",
            _fileName.substring(_fileName.lastIndexOf("_") + 1)
          );
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          url.revokeObjectURL(link.href); //销毁url对象
        } catch (e) {
          console.log("下载的文件出错", e);
        }
      });
    },
  },
  mounted: function () {
    this.getData();
    this.getEdit();
  },
  created: function () {
    //创建后获取session备份数据
    this.formData = JSON.parse(sessionStorage.getItem("statute"));
    this.fileList = [{ name: this.formData.fileAddress }];
  },
};
</script>
<style lang="less" >
.addStatute {
  padding: 30px;
}
.form {
  width: 1200px;
  margin: 30px auto;
}
.el_form {
  display: flex;
  justify-content: space-between;
}
.upload {
  background: #64c8bc;
  border: none;
}
.el-textarea__inner {
  height: 300px;
}
</style>